<template>
  <div id="app">
    <h1 ref="title">{{ msg }}</h1>
    <button @click="showDom">点我输出上方的DOM元素</button>
    <School ref="sch"></School>
  </div>
</template>

<script>
import School from './components/School.vue'
export default {
  name: 'App',
  components: {
    School,
  },
  data() {
    return {
      msg: '欢迎学习Vue',
    }
  },
  methods: {
    showDom() {
      console.log(this.$refs.title) // 真实DOM元素
      console.log(this.$refs.sch) //School组件的实例对象
      console.log(this.$refs) //School组件的实例对象
    },
  },
}
</script>
<style>
#app {
  background-color: aliceblue;
}
</style>
